<!DOCTYPE HTML> 

<html>
<head>
   <!--
    Add your name, the course number, and the due date here
    Name:     Dominique Alons
    Course:   CS414
    Due Date: 02-20-2013
   -->
   <meta name="author" content="Dominique Alons" />
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <link rel="stylesheet" type="text/css" href="css/template.css">
   <script type="text/javascript" src="JQuery/jquery-1.9.0.min.js"></script>
   <script type="text/javasscript" src="JQuery/jquery-ui-1.10.0.custom.js"></script>  
   <script type="text/javascript" src="JS/FirstPage.js"></script>
   <script type="text/javascript" src="JS/jquery.keycombinator.js"></script>
   <!-- <script type="text/javascript" src="JS/QA.js"></script> -->

   <title>Customer Listing</title>
 </head>
 <body>
<!-- CREATE SELECT LIST OF TEMPLATE QUESTIONS-->
<div id="question-area">
</div>
<div id="question-holding-area">
</div>
<div id="question-container">
  holder for created questions
</div>
<div id="test_submission_questions_div">
</div>
   <script type="text/javascript">
    p_non_zero = new RegExp(/^[1-9][0-9]*$/);
    question_array   = [];
    question_counter = 1;
    internal_array = [];
    $(document).ready(function(){
    function createQuestionArray(data_name, data_answer, data3)
    {
      $('#question-container').empty();
      alert("empty");
      console.log('hi');
    }
    function create_question_add_btn_func(question_area)
    {
      var create_question_add_btn = $('<div/>');
      create_question_add_btn.attr("id", 'create_question_add_btn'+question_area);
      create_question_add_btn.html('<button type="button" id="'+question_area+'create_question_add_btn">Add Question</button>');
      //add checks
      //create switch for the different questions???
      $(create_question_add_btn.find('button')[0]).click(function(){
        if($('#'+question_area+' > '+'input').val()=="")
        {
          alert('o no');
        }
        else
        {
          //if there is a question, check to see if there are any answers for the question, then add to internal question array and to the question-container
          //we'll probably have to change on the type of answer to look for based on question passed in; the sql will be handled by createQuestionArray(), which will be called here, defined above

              // t/f check 0,2
              switch(question_area)
              {
                case "question_template_tf_div" :
                  if($('#'+question_area)[0].children[1].children[2].checked || $('#'+question_area)[0].children[1].children[0].checked)
                  {
                    var question = [];
                    question.push($('#'+question_area+' > '+'input').val(), $('#question_template_tf_divPTS_inp').val(), $('input:radio[name=radio_tf]:checked').val(), 1);
                    question_array.push(question);
                    console.log(question_array);
                    $('#'+question_area).clone().attr("id", question_area+question_counter).prependTo('#question-container').end();
                    $('#question-container > #'+question_area+question_counter).find('button').remove();
                    $('#question-container > #'+question_area+question_counter).find("input,textarea,select,button").attr("disabled", true).end().addClass("no_edit");
                    $('#question-container > #'+question_area+question_counter).children().each(function(index){
                      $(this).attr("id", $(this).attr("id")+question_counter);
                    });
                    if($('#question-container > #'+question_area+question_counter).children().children().length > 0)
                    {
                      $('#question-container > #'+question_area+question_counter).children().children().each(function(index){
                        $(this).attr("id", $(this).attr("id")+question_counter);
                        $(this).attr("name", $(this).attr("name")+question_counter);
                        $(this).attr("for", $(this).attr("for")+question_counter);
                      });
                    }
                    question_counter++;
                  }
                  else
                    alert('no answer selected');
                break;
                case "question_template_fillin_div" : 
                  if(internal_array == "")
                    alert('There are no words selected for the fillin the blank question.');
                  else
                  {
                    var question = [];
                    question.push($('#'+question_area+' > '+'input').val(),$('#question_template_fillin_div_ans_div').text(),internal_array,2,$('#question_template_fillin_divPTS_inp').val()*1);
                    question_array.push(question);
                    console.log(question_array);
                    //alert('here');
                    question_counter++;
                  }
                break;
                case "question_template_essay_div" :
                  alert("essay area"); 
                break;
                default : alert('stub');
              }
          }
      });
      return create_question_add_btn;
    }
/*      $(document).keyup(function(e){
        console.log(e.keyCode);
        e.preventDefault();
      });*/
      /**********************CREATE DROPDOWN QUESTION SELECTION****************************/
      var array = new Array("Choose Question Type", "True/False", "Modified T/F", "Short Answer", "Multiple Choice", "Essay", "Fill in the Blank", "Many Choice", "Matching");
      $('#question-area').empty();
      var select_tag = $("<select/>");
      var counter = 0;
      select_tag.attr("id","question-dropdown");
      select_tag.attr("name", "question-dropdown");
      $.each(array, function(a,b){
        select_tag.append($("<option/>").attr("value", counter++).text(b));
      });
      $('#question-area').append(select_tag);

      /**********************CREATE QUESTION TEMPLATES****************************/
      //$('#question-container').empty();
      $('#question-holding-area').empty().hide();

    /*TRUE/FALSE QUESTION TEMPLATE*/
    var question_template_tf_div = $('<div/>');
    question_template_tf_div.attr("id", "question_template_tf_div");
    question_template_tf_div.attr("accesskey", "1");
    question_template_tf_div.html('TF Question: <input type="text" id="tf_question"><div id="tf_area"><input type="radio" name="radio_tf" id="radio_true" value="true" /><label for="radio_true">True</label><input type="radio" name="radio_tf" id="radio_false" value="false" /><label for="radio_false">False</label></div><div id="question_template_tf_divPTS">points possible<input type="text" id="question_template_tf_divPTS_inp" maxlength=4 size=4 /></div>');
    $('#question-holding-area').append(question_template_tf_div);
    $('#question_template_tf_divPTS_inp').keyup(function(){
      var string = $(this).val();
      if(p_non_zero.test(string))
        $(this).val(string);
      else
      {
        string = string.replace(/,/g, "");
        string = string.replace(/-/g, "");
        string = string.replace(/^[0]+/g, "");
        string = string.replace(/./g,"");
        $(this).val(string);
      }
    });
    $('#question_template_tf_div').append(create_question_add_btn_func('question_template_tf_div')).show();

    /*TRUE/FALSE (MODIFIED) TEMPLATE*/
    var question_template_mod_tf_div = $('<div/>');
    question_template_mod_tf_div.attr("id", "question_template_mod_tf_div");
    question_template_mod_tf_div.attr("accesskey", "2");
    question_template_mod_tf_div.html('TF MOD Question: <input type="text" id="tf_mod_question"><br /><div id="tf_mod_area"><input type="radio" name="radio_tf_mod" id="radio_true_mod" /><label for="radio_true_mod">True</label><br /><input type="radio" name="radio_tf_mod" id="radio_false_mod" /><label for="radio_false_mod">False</label></div>');
    $('#question-holding-area').append(question_template_mod_tf_div);

    var question_template_mod_tf_div_ans = $('<div/>');
    question_template_mod_tf_div_ans.attr("id", "tf_mod_correct_response");
    question_template_mod_tf_div_ans.html('Answer: <input type="text" id="question_template_mod_tf_div_ans">'+create_question_add_btn_func('question_template_mod_tf_div'));
    $('#question_template_mod_tf_div').append(question_template_mod_tf_div_ans);
    $('#tf_mod_correct_response').hide();
    $('#radio_true_mod').click(function(){
      $('#tf_mod_correct_response').slideUp();
    });
    $('#radio_false_mod').click(function(){
      $('#tf_mod_correct_response').slideDown();
      $('#question_template_mod_tf_div_ans').focus();
    });

    /*SHORT ANSWER TEMPLATE*/
    var question_template_short_ans_div = $('<div/>');
    question_template_short_ans_div.attr("id", "question_template_short_ans_div");
    question_template_short_ans_div.attr("accesskey", "3");
    question_template_short_ans_div.html('SA Phrase: <input type="text" id="sa_question"><br />');
    $('#question-holding-area').append(question_template_short_ans_div);

    var question_template_short_ans_div_ans = $('<div/>');
    question_template_short_ans_div_ans.attr("id", "short_ans_correct_response");
    question_template_short_ans_div_ans.html('Answer: <input type="text" id="question_template_short_ans_div_ans">'+create_question_add_btn_func('question_template_short_ans_div'));
    $('#question_template_short_ans_div').append(question_template_short_ans_div_ans);
    $('#short_ans_correct_response').hide();
    $('#sa_question').click(function(){
      $('#short_ans_correct_response').slideDown();
    });



    /*MATCHING QUESTION TEMPLATE*/
    var question_template_matching_div = $('<div/>');
    question_template_matching_div.attr("id", "question_template_matching_div");
    question_template_matching_div.attr("accesskey", "8");
    question_template_matching_div.html('');
    $('#question-holding-area').append(question_template_matching_div).show();

    /*MULTIPLE CHOICE QUESTION TEMPLATE*/
    var question_template_multi_choice_div = $('<div/>');
    question_template_multi_choice_div.attr("id", "question_template_multi_choice_div");
    question_template_multi_choice_div.attr("accesskey", "4");
    question_template_multi_choice_div.html('MULTIPLE CHOICE QUESTION: <input type="text" id="matching_question"> <br/>');
    $('#question-holding-area').append(question_template_multi_choice_div).show();

    var question_template_multi_choice_div_ans = $('<div/>');
    question_template_multi_choice_div_ans.attr("id", "question_template_multi_choice_div_ans");
    question_template_multi_choice_div_ans.html('hi there');
    $('#question_template_multi_choice_div').append(question_template_multi_choice_div_ans).show();

    /*ESSAY QUESTION TEMPLATE*/
    var question_template_essay_div = $('<div/>');
    question_template_essay_div.attr("id", "question_template_essay_div");
    question_template_essay_div.attr("accesskey", "5");
    question_template_essay_div.html('ESSAY QUESTION: <input id="question_template_essay" type="text"><div id="question_template_essay_PTS_inp">points possible<input type="text" id="question_template_essay_PTS" maxlength=4 size=4 /></div>');
    $('#question-holding-area').append(question_template_essay_div).show();
    $('#question_template_essay_div').append(create_question_add_btn_func('question_template_essay_div')).show();

    /*MANY CHOICE QUESTION TEMPLATE*/
    var question_template_many_choice_div = $('<div/>');
    question_template_many_choice_div.attr("id", "question_template_many_choice_div");
    question_template_many_choice_div.attr("accesskey", "7");
    question_template_many_choice_div.html('');
    $('#question-holding-area').append(question_template_many_choice_div).show();

    /*FILLIN QUESTION TEMPLATE*/
    var question_template_fillin_div = $('<div/>');
    question_template_fillin_div.attr("id", "question_template_fillin_div");
    question_template_fillin_div.attr("accesskey", "6");
    question_template_fillin_div.html('PHRASE: <input id="question_template_fillin_div_ans" type="text"> <div id="question_template_fillin_divPTS">points possible <input type="text" id="question_template_fillin_divPTS_inp" maxlength=4 size=4 /></div>');
    $('#question-holding-area').append(question_template_fillin_div);
    $('#question_template_fillin_divPTS_inp').keyup(function(){
      var string = $(this).val();
      if(p_non_zero.test(string))
        $(this).val(string);
      else
      {
        string = string.replace(/,/g, "");
        string = string.replace(/-/g, "");
        string = string.replace(/^[0]+/g, "");
        string = string.replace(/./g,"");
        $(this).val(string);
      }
    });

    var question_template_fillin_div_ans_div = $('<div/>');
    question_template_fillin_div_ans_div.attr("id", 'question_template_fillin_div_ans_div');
    $('#question_template_fillin_div').append(question_template_fillin_div_ans_div).show();
    $('#question_template_fillin_div').append(create_question_add_btn_func('question_template_fillin_div')).show();

    $('#question_template_fillin_div_ans').keyup(function(){
      var text = $('#question_template_fillin_div_ans').val();
      question_template_fillin_div_ans_div.text(text);
    });
    $('#question_template_fillin_div_ans').keyup(function(e){
      if(e.keyCode == 13)
      {
        var text = $('#question_template_fillin_div_ans_div').text().split(' ');
        internal_array = [];
        var counter = 0;
        $('#question_template_fillin_div_ans_div').empty();
        $.each(text, function(a, b) {
          var id_text = counter+"fillin";
          $('#question_template_fillin_div_ans_div').append($('<span class="correct-spacing"'+'id="'+id_text+'" />').text(b));
          $('#'+id_text).hover(function(){$(this).append('<span>x</span>');},
                               function(){var text2 = $(this).text();
                                            $(this).text(text2.slice(0,-1));}
                               );
          $('#'+id_text).click(function(){
            var length = $(this.firstChild).text().length;
            internal_array.push($(this).text().slice(0,-1));
            var replace = '';
            for(var i = 0; i < length; i++)
              replace += '_';
            $(this).text(replace).unbind('click mouseenter mouseleave');
          });
          counter++;
        });
      }
    });
    //createQuestionArray(1,2,3);
    //hideTemplateQuestions(0);
    $('#question-area').change(function(){
      if($('#question-dropdown option:selected').val() == "")
        var you = "0";
      else
        var you = $('#question-dropdown option:selected').val();
      switch(you)
      {
        case "0": hideTemplateQuestions(0); break;
        case "1": hideTemplateQuestions(1); break;
        case "2": hideTemplateQuestions(2); break;
        case "3": hideTemplateQuestions(3); break;
        case "4": hideTemplateQuestions(4); break;
        case "5": hideTemplateQuestions(5); break;
        case "6": hideTemplateQuestions(6); break;
        case "7": hideTemplateQuestions(7); break;
        case "8": hideTemplateQuestions(8); break;
        default: alert("I just don't know what went wrong!");
      }
      });
    function hideTemplateQuestions(number)
    {
      switch(number)
      {
        case 0: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        case 1: $('#question_template_tf_div').slideDown(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        case 2: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideDown(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        case 3: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideDown(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        case 4: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideDown(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        case 5: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideDown(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        case 6: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideDown(); break;
        case 7: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideDown(); $('#question_template_fillin_div').slideUp(); break;
        case 8: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideDown(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
        default: $('#question_template_tf_div').slideUp(); $('#question_template_mod_tf_div').slideUp(); $('#question_template_short_ans_div').slideUp(); $('#question_template_matching_div').slideUp(); $('#question_template_multi_choice_div').slideUp(); $('#question_template_essay_div').slideUp(); $('#question_template_many_choice_div').slideUp(); $('#question_template_fillin_div').slideUp(); break;
      }
    }
    /*QUESTION ADD BUTTON AREA*/
    });
   </script>
 </body>
 </html>